<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>tiaoti</h2>
    <ul>
      <li>内容1</li>
      <li>内容2</li>
      <li>内容3</li>
    </ul>
  </div>

  <script>
    // 在浏览器里面，直接操作dom元素，是非常耗时的。
    // 我们要尽可能地避免过多的操作dom


    // 虚拟dom + 响应式系统 + 组件系统  -> react

    // 直接操作dom会比操作内存中数据慢得多
    const obj = {
      tagName: "div",
      attrs: {id: "app"},
      children: [
        {
          tagName: "h2",
          attrs: {},
          children: ["tiaoti"]
        },
        {
          tagName: "ul",
          attrs: {},
          children: [
            {
              tagName: "li",
              attrs: {},
              children: ["内容1"]
            },
            {
              tagName: "li",
              attrs: {},
              children: ["内容2"]
            },
            {
              tagName: "li",
              attrs: {},
              children: ["内容3"]
            }
          ]
        },
      ]
    }








    // console.time("aaa")
    // for (let i = 1; i < 100000; i++) {
    //   document.querySelector("div").innerHTML = i
    // }
    // console.timeEnd("aaa")


    // console.time("bbb")
    // let j = 0;
    // for (let i = 1; i < 100000; i++) {
    //   j = i
    // }
    // document.querySelector("div").innerHTML = j;
    // console.timeEnd("bbb")
  </script>
</body>
</html>